<template>
  <div class="hstock">
    
    <!-- <el-button slot="append" icon="el-icon-search" @click="isStock"></el-button> -->
    <div class="hstock-con">

      <!-- 登录：显示
      未登录：显示热门股票；alert提示框：当前未登录自动显示热门股票，建议您登录后添加
      v-if 判断isLogin，然后显示对应信息（display:none）
        您还没有访问过股票，请进入行情中心访问...
        怎么判断是否访问过股票？点击自增，然后加到数据库中？访问表与用户表什么关系？是在用户表里有访问字段？
        未登录时会记录访问次数？登录后访问记录如何存储，当用户没有退出登录，关闭网页时之前的访问应该存储在表里。最近访问股时期会超时清空吗？最大记录数？
      参考Params.vue 页面一加载就渲染出数据。此处是否需要作用域插槽 -->
      <el-tabs type="border-card">
        <!-- <el-tab-pane label="自选股" name="self">
          <strong class="hd" id="zxg_title"><span class="mh-title">以下为近期热门股票，建议您&nbsp;<a href="https://sso.jrj.com.cn/sso/ssologin?ReturnURL=//www.jrj.com.cn">登录</a>&nbsp;后添加</span></strong>
        </el-tab-pane>
        <el-tab-pane label="最近访问" name="recent">
          最近访问
        </el-tab-pane> -->
        <el-tab-pane label="自选股">
          <div class="login" v-if="$store.state.login===0">
            <div class="point">
               <span class="point-title">以下为近期热门股票，建议您&nbsp;<a href="http://localhost:8080/#/login">登录</a>&nbsp;后添加</span>
            </div>
            <div class="h_hstockbd">
              <el-table :data="hotStock" stripe width="100%" class="td-fontsize td-fontcolor-red">
                <!-- <el-table-column prop="name" label="概念名称"></el-table-column> -->
                <el-table-column label="股票名称">
                  <template slot-scope="scope">
                    <a :href="scope.row.sAddress" target="__blank" class="hstock h_hstockName">
                    {{scope.row.name}}
                    </a>
                  </template>
                </el-table-column>
                <el-table-column prop="lastestPrice" label="最新价"></el-table-column>
                <el-table-column prop="percent" label="涨跌幅"></el-table-column>
                <!-- 问股：待完 -->
                <!-- 此处要判断是否登录，自选时应该要传递该支股票的信息 -->
                <el-table-column label="加入自选">
                  <template slot-scope="scope">
                    <!-- <a :href="scope.row.msAddress" target="__blank" class="h_mslect">
                    {{scope.row.upstock}}
                    </a> -->
                    <!-- 加入自选按钮 -->
                    <el-button type="danger" size="mini" @click="AddMyStock(scope.row.id)">+自选</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>          
          
          <div class="unlogin" v-else-if="$store.state.login===1">
            <div class="point">
               <!-- <span class="point-title">以下为近期热门股票，建议您&nbsp;<a href="http://localhost:8080/#/login">登录</a>&nbsp;后添加</span> -->
               <span class="point-title">以下是您的关注的股票，您可以将其加入自选股</span>
            </div>
            <div class="h_hstockbd">
              <el-table :data="followStockList" stripe width="100%" class="td-fontsize td-fontcolor-red">
                <!-- <el-table-column prop="name" label="概念名称"></el-table-column> -->
                <el-table-column label="股票名称">
                  <template slot-scope="scope">
                    <a :href="scope.row.sAddress" target="__blank" class="hstock h_hstockName">
                    {{scope.row.name}}
                    </a>
                  </template>
                </el-table-column>
                <el-table-column prop="lastestPrice" label="最新价"></el-table-column>
                <el-table-column prop="percent" label="涨跌幅"></el-table-column>
                <!-- 问股：待完 -->
                <!-- 此处要判断是否登录，自选时应该要传递该支股票的信息 -->
                <el-table-column label="加入自选">
                  <template slot-scope="scope">
                    <!-- <a :href="scope.row.msAddress" target="__blank" class="h_mslect">
                    {{scope.row.upstock}}
                    </a> -->
                    <!-- 加入自选按钮 -->
                    <el-button type="danger" size="mini" @click="AddMyStock(scope.row.id)">+自选</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div> 
        </el-tab-pane>
        <!-- https://api.money.126.net/data/feed/1000001,1000691?callback=bowlder.cb._c -->
        <el-tab-pane label="最近访问" name="recent">
          最近访问
        </el-tab-pane>
      </el-tabs>
    </div>
    
    <!-- 广告 -->
    <HAd/>

    <!-- 热度选股 -->
    <div class="h-con" style="margin-top: 10px">
      <div class="h-hd h_hslect-hd">
          <!-- <span class="mh-login" id=""><a href="http://summary.jrj.com.cn/dpyt/" style="color: #003399">更多</a></span> -->
          <!-- <span class="mh-title" id=""><a href="http://summary.jrj.com.cn/dpyt/">大盘云图</a></span> -->
        <strong>热度选股</strong>
        <el-button style="float: right; padding: 9px 3px" type="text">更多</el-button>
      </div>
      <div class="h_hslect-bd hotStock-bd">
        <el-table :data="hotStocksList" stripe width="100%" class="td-fontsize td-fontcolor-red">
          <!-- <el-table-column prop="name" label="概念名称"></el-table-column> -->
          <el-table-column label="股票名称">
            <template slot-scope="scope">
              <!-- "https://money.163.com/+'{{code}}'+.html" -->
              <a :href="['https://money.163.com/'+code+'.html']" target="__blank" class="hstock h_hstockName">
              {{scope.row.name}}
              </a>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="lastestPrice" label="最新价"></el-table-column>
          <el-table-column prop="percent" label="涨跌幅"></el-table-column> -->
          <el-table-column label="关注该股">
            <template slot-scope="scope">
              <!-- <a :href="scope.row.msAddress" target="__blank" class="h_mslect">
              {{scope.row.upstock}}
              </a> -->
              <!-- 加入自选按钮 -->
              <el-button type="warn" size="mini" @click="addFollowStock(scope.row)" v-if="scope.row.followed===false">关注</el-button>
              <el-button type="warn" size="mini" @click="addFollowStock(scope.row)" v-else>已关注</el-button>
            </template>
          </el-table-column>
          <!-- 问股：待完 -->
          <!-- 此处要判断是否登录，自选时应该要传递该支股票的信息 -->
          <el-table-column label="加入自选">
            <template slot-scope="scope">
              <!-- <a :href="scope.row.msAddress" target="__blank" class="h_mslect">
              {{scope.row.upstock}}
              </a> -->
              <!-- 加入自选按钮 -->
              <el-button type="danger" size="mini" @click="AddMyStock(scope.row.id)">+自选</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
  </div>
  </div>
</template>

<script>
import jsonp from 'jsonp'
import HAd from './HAd'

import {
  getFollowStock,
  updateFollowStock,
  getHotStock
} from '../../../api/followStock.js'
export default {
  components:{
    HAd
  },
  data() {
    return {
      // 这是测试阶段使用的，实际应该在一打开网站就判断用户是否登录（isLogin函数返回一个isLogin变量？）
      isLogin:0,
      // 被激活的页签的名称
      activeName:'recent',
      hotStock:[
        {
          id:'1',
          name:'国家电力',
          lastestPrice:1.81,
          percent:'-1.63%',
          cAddress:'https://www.baidu.com'
        },
        {
          id:'2',
          name:'紫金矿业',
          lastestPrice:3.92,
          percent:'-2.73%',
          cAddress:'https://www.baidu.com'
        },
        {
          id:'3',
          name:'中国联通',
          lastestPrice:5.06,
          percent:'-1.63%',
          cAddress:'https://www.baidu.com'
        },
        {
          id:'4',
          name:'秦港股份',
          lastestPrice:2.66,
          percent:'-0.37%',
          cAddress:'https://www.baidu.com'
        }
      ],
      qfollowStock:[{
          id:'1',
          name:'国家电力',
          lastestPrice:1.81,
          percent:'-1.63%',
          cAddress:'https://www.baidu.com'
        }],
      followStockList:[],
      isStockData:{},
      hotStocksList:[]
    }
  },
  methods:{
    isStock(){
      jsonp('https://i.money.163.com/hs/api/myStockList.json',{},(err,res)=>{
        if(!err){
          console.log(res);
          this.isStockData=res;
          console.log(this.isStockData.data);
          
          console.log(this.isStockData.data.hotStocks);
          
          if(this.isLogin===1){
            // 结合网易财经的登录与未登录,但是有一个问题是请求结束之后isStockData就无法使用，显然是错误的
            // 所以需要在全局下定义这个对象，一打开网站就应该调用isLogin()方法，（isLogin函数返回一个isLogin变量？）从而修改这个isStockData对象。
            // 而且如果登录应该生成一个有效token（前端根据这个token判断是否是登录状态，如果不是登录状态，需要用户重新登录
          console.log(this.isStockData);
            this.isStockData.success=1;
            console.log(this.isStockData);
            // 往this.isStock.data对象里面加入一个myStocks数组？
          }else{
            // 未登录：返回对象：success:0,errorType:-1,data:{},msg:{}
            this.hotStocksList=this.isStockData.data.hotStocks;
            console.log("*************热门股票**************")
            console.log(this.hotStocksList);
            
          }
        }
      });
    },
    getHotStockRes(){
      getHotStock().then(res => {
      console.log(res);
      this.hotStocksList=res.data;
      })
    },
    /* async followStock(){
      const res = await this.$http.post('/myfollowStock')
      console.log(res);
    }, */
    getFollowedStock(){
      getFollowStock().then(res => {
      console.log(res);
      this.followStockList=res.data;
      })
    },
    addFollowStock(param){
      if(this.$store.state.login===0){
        this.$confirm('请先登录?', '提示', {
          type: 'warning'
        }).then(() => {
          this.$router.push("/login");
        })
      }else if(this.$store.state.login===1){
        console.log(param);
        updateFollowStock(param).then(res => {
          console.log(res);
          this.$message({
            message: res.data.data.message,
            type: 'success'
          })
          this.getHotStockRes()
          this.getFollowedStock()
        })
      }
    }
  },
  created() {
    // this.isStock()
    this.getHotStockRes()
    // this.$store.dispatch('hotStock');
    this.getFollowedStock()
  }
}
</script>

<style>
.hstock {
  height: 400px;
}
.point {
  margin: 0;
  height: 25px;
  line-height: 25px;
  text-align: center;
}
.point-title {
  font-size: 12px;
}
.point-title a {
  color: #003399;
}
.hstock-con {
  margin-bottom: 30px;
  border-top: solid 2px #c01639;
}
.hotStock-bd {
  height:500px;
  overflow: hidden;
}
</style>
